<template>
  <el-dialog
    v-model="dialogSelect.visible"
    :width="screenWidth"
    :fullscreen="mobile === 'mobile'"
    :title="title"
    draggable
    :close-delay="200"
    close-icon="CloseBold"
    @close="closeDialog(null, false)"
  >
    <div class="app-container">
      <div class="search-container">
        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
          <el-form-item label="关键字" prop="keywords">
            <el-input
              v-model="queryParams.keywords"
              placeholder="请输入关键字"
              clearable
              style="width: 200px"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleQuery"><i-ep-search />搜索</el-button>
            <el-button @click="resetForm(true)">
              <i-ep-refresh />
              重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>

      <el-table
        v-loading="loading"
        :data="tableList"
        highlight-current-row
        border
        height="260"
        size="small"
        @current-change="handleCurrentChange"
      >
        <el-table-column label="序号" type="index" width="60" align="center"></el-table-column>
        <!-- 保证金账户 -->
        <el-table-column label="项目名称" align="center" prop="projectName" min-width="160" />
        <el-table-column label="项目编号" align="center" prop="projectNum" min-width="160" />
        <el-table-column label="账户编号" align="center" prop="guaranteeAccountCode" min-width="150" />
        <el-table-column label="账户名称" align="center" prop="guaranteeAccountName" min-width="150" />
        <el-table-column label="缴纳主体名称" min-width="150" align="center" prop="paymentName" />
        <el-table-column label="缴纳主体统一社会信用代码" min-width="120" align="center" prop="paymentCode" />
        <el-table-column label="收支方式" min-width="120" align="center" prop="guaranteeAccountTypeName" />
      </el-table>

      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="handleQuery"
      />
      <!--      </el-card>-->
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import { QueryActivePaymentPage } from "@/api/guarantee/index";
import { ElForm } from "element-plus";

import { useScreen } from "@/store/modules/screen";

const screenStore = useScreen();
const mobile = computed(() => screenStore.device);
const screenWidth = ref(900);

const initScreen = () => {
  if (mobile.value === "mobile") {
    screenWidth.value = screenStore.screenWidth;
  } else {
    screenWidth.value = 900;
  }
};

const emit = defineEmits(["selectSendClose"]);
const props = defineProps({
  dialogSelect: {
    type: Object,
    default: () => ({
      visible: false,
      type: undefined,
    }),
  },
});

const { dialogSelect } = toRefs(props);

let loading = ref(false);
const title = ref("选择项目");

const queryFormRef = ref(ElForm);
const tableList = ref<any[]>();
const queryParams = reactive<any>({
  pageNum: 1,
  pageSize: 20,
});
let total = ref(0);

const handleCurrentChange = (val: any) => {
  closeDialog(val, true);
};

/**
 * 关闭弹窗
 */

const closeDialog = (info: any, query: boolean) => {
  emit("selectSendClose", info, query);
  resetForm(false);
};

/**
 * 重置表单
 */

const resetForm = (query: boolean) => {
  tableList.value = [];
  queryFormRef.value.resetFields();
  queryFormRef.value.clearValidate();
  queryParams.pageNum = 1;
  queryParams.pageSize = 20;
  if (query) {
    handleQuery();
  }
};

/* 列表查询 */
const handleQuery = () => {
  loading.value = true;
  QueryActivePaymentPage(queryParams)
    .then((res) => {
      if (res.type === 0) {
        if (res.success) {
          tableList.value = res.data.list;
          queryParams.pageNum = res.data.pageNum;
          queryParams.pageSize = res.data.pageSize;
          total.value = res.data.total;
        } else {
        }
      } else {
      }
    })
    .finally(() => {
      loading.value = false;
    });
};

watch(
  () => dialogSelect.value.visible,
  (val) => {
    console.log(val);
    if (dialogSelect.value.visible) {
      handleQuery();
    }
  }
);

onMounted(() => {
  initScreen();
});
</script>

<style lang="less" scoped>
.app-container {
  padding: 0px;
}
</style>
